<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/5/14 20:18
 -->
<template>
  <div class="!p-[12px] m-[auto] bg-[#fff]">
    <g-title> ⚠️ 对element-ui table二次封装，通过声明式方式来编写代码 </g-title>

    <div class="py-[12px]">
      <el-button @click="loadData">开启加载</el-button>
      <el-button @click="table.data = []">清除数据</el-button>
      <el-button @click="table.border = !table.border">{{ !table.border ? '加上边框' : '去除边框' }}</el-button>
    </div>
    <g-table :loading="table.loading" :columns="table.columns" :data="table.data" :border="table.border">
      <template #operate="{ row }">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </g-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: {
        loading: true,
        border: false,
        columns: [
          { label: '序号', type: 'index', width: 80 },
          { label: '日期', prop: 'date', width: 120 },
          { label: '姓名', prop: 'name', width: 120 },
          { label: '省份', prop: 'province', width: 120 },
          { label: '市区', prop: 'city', width: 120 },
          { label: '地址', prop: 'address', minWidth: 300 },
          { label: '邮编', prop: 'zip', width: 120 },
          { label: '操作', slot: 'operate', width: 120 }
        ],
        data: []
      }
    }
  },

  mounted() {
    this.loadData()
  },

  methods: {
    loadData() {
      this.table.loading = true
      setTimeout(() => {
        this.table.data = [
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }
        ]
        this.table.loading = false
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss"></style>
